/* 
    【1】判断是否有登录
        +   有登录直接显示购物车
        +   没有登录的 跳转到登录页面
    【2】显示购物车的情况
        +   【1】获取数据 
            +   看看这个用户名是否有数据
                +   直接循环渲染
                +   没有数据 （提示没有数据 请求的列表页选购）
        +   【2】全选按钮
            +   把所有商品前面的选择选上
        +   【3】单独点击商品全面的选择
            +   当把所有的商品都选上之后 全选要被选上
        +   【4】点击结算 
            +   把选上的商品 删除
            +   删除成功之后再次获取数据
        +   【5】点击加减的时候 更新对应这条商品的 数量

    
    用面向对象的编程思想 实现购物车
    class Car{
        constructor(ele){
            this.ele = ele;
        }
        init:function(){
            // 获取元素 创建元素 绑定事件

            this.getData();
        }
        getData:async  function(){
            
        }
    }
*/

let login = getCookie("login");

if (!login) {
    localStorage.setItem("url", location.href);

    location.href = "../html/login.html";
}

class Car {
    constructor(ele, username) {
        this.ele = document.querySelector(ele);
        this.username = username;

        this.init();
    }
    init() {
        this.ul = this.ele.querySelector("ul");
        this.totalLen = this.ele.querySelector("#totalLen");
        this.selectLen = this.ele.querySelector("#selectLen");
        this.selectPrice = this.ele.querySelector("#selectPrice");

        this.allChecked = this.ele.querySelector("#allChecked");

        // 调用获取数据的方法
        this.getData();

        // 利用事件委托 绑定点击事件
        this.ele.onclick = () => {
            let e = window.event;
            let target = e.target;

            if (target.id == "allChecked") {
                let data = JSON.parse(localStorage.getItem("data"));
                data = data.map((item) => {
                    target.checked
                        ? (item.is_select = "1")
                        : (item.is_select = "0");

                    return item;
                });

                // 当获取出来的数据 更改之后需要再次存入本地存储
                localStorage.setItem("data", JSON.stringify(data));
                this.render();

                return;
            }

            // 给每一个商品前面的复选框绑定点击事件
            if (target.className == "checked") {
                // 当点击这个商品的选择框的时候 更改这个商品的is_select
                let id = target.getAttribute("data_id");

                this.data.forEach((item) => {
                    // 判断点击这个商品的id
                    if (item.goods_id == id) {
                        target.checked
                            ? (item.is_select = "1")
                            : (item.is_select = "0");
                    }
                });

                // 是否把所有的商品都选中
                // 如果所有的商品的is_select = 1 说明所有的商品都被选中
                // 全选框 就应该被选中
                let flag = this.data.every((item) => {
                    return item.is_select == "1";
                });
                this.allChecked.checked = flag;

                // 当数据更改之后 需要再把这个数据存入 本地存储
                localStorage.setItem("data", JSON.stringify(this.data));

                this.render();

                return;
            }

            // 点击结算（把选中的商品删除）
            // 删除 is_select = '1'的数据
            if (target.classList.contains("settlement")) {
                // 把is_select = '1' 过滤出来
                // 把本地 和数据库中 这个条数据都删除
                
                this.data.forEach((item) => {
                    if (item.is_select == "1") {
                        //先把数据库中的数据 删除 删除成功之后 在删除本地这条数据
                        this.removeData(item.goods_id);
                    }
                });

                return;
            }
            // classList 以数组的形式返回元素的所有的class名
            // classList.contains(指定的class名) 判断这个元素中是否包含这个执行的class名
            // 返回值：如果包含 就返回 true  不包含就返回false

            // + - 按钮
            if (target.classList.contains("add")) {
                // 点击+ 按钮的时候
                // 发送ajax请求 修改数据库中这条商品的数量
                // 当修改数据库中数据成功 之后 把本地存储的数据也进行修改
                // 然后this.render();
                let id = target.getAttribute("data_id");
                let num = target.previousElementSibling.innerText * 1;
                num++;

                this.updData(id, num);

                return;
            }

            if (target.classList.contains("reduce")) {
                let id = target.getAttribute("data_id");
                let num = target.nextElementSibling.innerText * 1;

                num--;
                this.updData(id, num);
                return;
            }

            // 清空购物车
            // 把这个用户的所有数据从购物车数据表中删除
            if (target.classList.contains("clear")) {
                // 当把数据库中数据清空之后 也需要把本地的数据清空
                pAjax({
                    url: "../api/clearCarData.php",
                    data: {
                        username: this.username,
                    },
                }).then((res) => {
                    res = JSON.parse(res);

                    if (res.code) {
                        // 把本地的数据移出
                        // localStorage.removeItem()
                        localStorage.setItem("data", JSON.stringify([]));
                        this.render();
                    }
                });
            }
        };
    }
    // 设置一个异步的函数
    async getData() {
        let res = await pAjax({
            url: "../api/getCarData.php",
            data: {
                username: this.username,
            },
        });
        localStorage.setItem("data", res);

        // 把请求出来的数据 直接 存入本地存储
        this.render();
    }

    //渲染结构的方法
    render() {
        this.data = JSON.parse(localStorage.getItem("data"));
        this.totalLen.innerText = this.data.length;
        this.calculation();
        if (this.data.length == 0) {
            this.ul.innerHTML = ` <div class="jumbotron">
        <h1>您暂时还你没有数据，请到列表页选购</h1>
        <p><a class="btn btn-primary btn-lg" href="../html/list.html" role="button">跳转列表页</a></p>
    </div>`;

            return;
        }

        let str = "";

        this.data.forEach((item) => {
            str += `<li>
            <div class="media">
                <div class="media-left media-middle">
                    <input type="checkbox" ${
                        item.is_select == "1" ? "checked" : ""
                    }  data_id="${item.goods_id}" class="checked">
                    <a href="#">
                        <img class="media-object"
                            src="${item.goods_small_logo}"
                            alt="">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">${item.goods_name}</h4>
                    <div class="price">
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                    </div>
                    <div class="btn">
                        <p>
                            <butto data_id="${
                                item.goods_id
                            }" class="btn btn-danger">删除商品</butto>
                        </p>
                        <div class="btn-group" role="group" aria-label="...">
                            <button data_id="${item.goods_id}" ${
                item.cart_number == 1 ? "disabled" : ""
            } class="btn btn-default reduce">-</button>
                            <button class="btn btn-default">${
                                item.cart_number
                            }</button>
                            <button data_id="${
                                item.goods_id
                            }" class="btn btn-default add">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </li>`;
        });

        this.ul.innerHTML = str;
    }

    async removeData(id) {
        let res = await pAjax({
            url: "../api/removeCarData.php",
            data: {
                username: this.username,
                goods_id: id,
            },
        });
        res = JSON.parse(res);
        if (res.code) {
            //把本地的数据中goods_id == id的这条数据删除
            this.data = this.data.filter((item) => {
                return item.goods_id != id;
            });
            // 在把最新的数据存入本地存储
            localStorage.setItem("data", JSON.stringify(this.data));

            // 重新渲染数据
            this.render();
        }
    }

    async updData(id, num) {
        let res = await pAjax({
            url: "../api/updCarData.php",
            data: {
                username: this.username,
                goods_id: id,
                goods_num: num,
            },
        });
        res = JSON.parse(res);
        if (res.code) {
            // 需要把本地的数据也进行修改
            this.data.forEach((item) => {
                item.cart_number = item.goods_id == id ? num : item.cart_number;
            });

            localStorage.setItem("data", JSON.stringify(this.data));
            this.render();
        }
    }

    // 计算所选商品的数量 和价格
    calculation() {
        // 过滤 商品的状态 is_select = 1
        let selectData = this.data.filter((item) => {
            return item.is_select == "1";
        });

        // 根据is_select= 1的数据 计算商品数量
        this.selectLen.innerText = selectData.reduce((pre, item) => {
            return pre + item.cart_number * 1;
        }, 0);

        // 根据is_select= 1的数据 计算商品的总价格
        let totalPrice = selectData.reduce((pre, item) => {
            return pre + item.goods_price * item.cart_number;
        }, 0);

        this.selectPrice.innerText = totalPrice.toFixed(2);
    }
}

new Car(".container", login);
